<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="register/html; charset=gb2312">
    <title>注册</title>
    <style>
        body {
             background: url('../img/1.jpg') no-repeat;
            background-size: 100% auto;
        }
        
        #loginDiv {
            width: 20%;
            height: 360px;
            background-color: #00000085;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }
        
        #name_trip {
            margin-left: 50px;
            color: red;
        }
        
        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 10px;
            text-align: left;
            color: azure;
        }
        
        .sexDiv>input {
            width: 30px;
            height: 17px;
        }
        
        input,
        select {
            
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 180px;
            background-color: rgba(105, 105, 105, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        
        .button {
            margin-top: 15px;
            width: 25%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            font-size: 15px;
            background-image: linear-gradient(120deg, #f093fb 0%, #7957f5 100%);
            cursor: pointer;
        }
        
        .introduce {
            margin-left: 110px;
        }
        
        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }
        
        h1 {
            color: #ffffff90;
            margin-top: 5%;
        }
        
        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
        a{text-decoration:none;
        color:white;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
    <h1>注 册</h1>
        <form th:action="@{/user/addregister}" method="post">
            
            <p>用户姓名:<input id="userNname" type="text" name="userName" autofocus required></p>
 
            <p>用户密码:<input id="password" type="password" name="password"required></p>
 
            <p>电话号码:<input id="phone" type="phone" name="ph" required></p>
 
            <div class="sexDiv">
                用户性别:
                <input class="userSex" name="sex" value="男" type="radio">男
                <input class="userSex" name="sex" value="女" type="radio">女
                <label id="sex_trip"></label>
            </div>
            <p>
                电子邮件:
                <input id="email" type="email" name="em" required>
                <label id="emil_trip"></label>
            </p>
           
            <p style="text-align: center;">
                <input type="submit" class="button" onblur="checkForm()" value="注册">
               <button class="button"><a th:href="@{/user/login}">去登录</a></button>
            </p>
            
        </form>
       
        <p style="text-align: center;" th:text="${msg}"></p>
    </div>
 
</body>
<script type="text/javascript">
    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }
 
    function checkSex() {
        var sexNum = document.getElementsByName("sex");
        var sex = "";
        for (let i = 0; i < sexNum.length; ++i) {
            if (sexNum[i].checked) {
                sex = sexNum[i];
             }
 
         }
         if (sex == "") {
             trip("sex_trip", "ERROR!!");
             return false;
         } else {
             trip("sex_trip", "OK!!");
         }
    }
 
    function checkForm() {
        checkSelect();
        checkHobby();
        checkSex();
        //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        var inputEmail = document.getElementById("email");
        var uEmail = inputEmail.value;
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
            trip("emil_trip", "邮箱不合法!!");
            return false;
        } else {
            trip("emil_trip", "OK!!");
        }
    }
 
 
</script>
</html>